<template>
    <div>
        <button @click="msg = 'hello'">修改msg</button>
        <p>{{ msg }}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: '你好',
                count: 0,
                timerId: null
            }
        },
        // 钩子是跟data和methods这些平级的
        beforeCreate () {
            // 最早的钩子，不能访问数据
            console.log('beforeCreate', this.msg)
        },
        created () {
            this.timerId = setInterval(() => {
                console.log('定时器调用')
            }, 1000);
            // 最早能访问数据和方法的钩子
            console.log('created', this.msg, document.querySelector('p'))
        },
        beforeMount () {
            console.log('beforeMount', document.querySelector('p'))
        },
        mounted () {
            console.log('mounted', document.querySelector('p'))
        },
        beforeUpdate () {
            // 既打印数据，也打印界面的内容
            console.log('beforeUpdate',this.msg, document.querySelector('p').innerText)
        },
        updated () {
            // 既打印数据，也打印界面的内容
            console.log('updated', this.msg, document.querySelector('p').innerText)
        },

        beforeDestroy () {
            clearInterval(this.timerId)
            console.log('beforeDestroy')
        },
        destroyed () {
            console.log('destroyed')
        }
    }
</script>

<style>

</style>